<template>
  <div class="" v-if="operate.printTempData.length > 1">
    <el-dialog
      v-model="operate.open"
      width="800px"
      append-to-body
      @close="canle"
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">
            {{ operate.title }}
          </div>
        </div>
      </template>

      <div class="table_area">
        <!--   @selection-change="handleToPrint"    
          @row-click="handleRowChick" -->
        <el-table
          ref="tempTableRef"
          height="100%"
          v-loading="operate.loadingTable"
          :data="operate.printTempData"
          highlight-current-row
          @row-click="handleSingleRowClick"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="选择" width="70" border>
            <template #default="{ row }">
              <el-radio v-model="rowSelection" :label="row.report_Id">{{ "" }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="reportId" label="模板编号"> </el-table-column>
          <el-table-column prop="reportName" label="模板名称"> </el-table-column>
          <el-table-column prop="reportStateName" label="模板状态"> </el-table-column>
          <el-table-column prop="reportTypeName" label="模板类型"> </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitPrint" :loading="operate.addLoading">
            {{ operate.addLoading ? "正在打印中" : "确 定" }}</el-button
          >
          <el-button @click="canle"> 关 闭 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";

const emit = defineEmits(["submitPrint", "canle"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  operate: {
    type: Object,
    default: true,
  },
});
const tempTableRef = ref(null); //表格dom
const rowSelection = ref(null);
const submitPrint = () => {
  //如果数据为零，并且没有勾选
  if (!rowSelection.value || props.operate.loadingTable.length == 0) {
    ElMessage({ message: "请先选择模板！", type: "warning" });
    return;
  }
  emit("submitPrint", rowSelection);
};
const canle = () => {
  emit("canle", props.operate);
};

const handleSingleRowClick = (currentRow) => {
  rowSelection.value = currentRow.reportId;
  console.log("触发了", rowSelection.value);
};

defineExpose({
  handleSingleRowClick,
  rowSelection,
  submitPrint,
});
</script>

<style lang="scss" scoped>
.dialog_title {
  display: flex;
  font-weight: 700;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: auto;
    border-radius: 3px;
    margin-right: 10px;
  }
  .title {
    color: #000;
  }
}
</style>
